<template>
  <!--无限循环滚动走马灯组件-->
    <div class="singer-list">
        <!--头部信息-->
        <PartTitle :title-info="titleInfo"/>
        <div class="singer-show">
            <div class="singer-item">
                <ul class="singer-content">
                    <li v-for="item in playList" :key="item.id" class="singer-items">
                        <list-item :item-description="item"/>
                    </li>
                </ul>
                <ul class="singer-content">
                    <li v-for="item in playList" :key="item.id + 'tmp'" class="singer-items">
                        <list-item :item-description="item"/>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import listItem from "@/minicomponents/ListItem.vue";
import PartTitle from "@/minicomponents/PartTitle.vue";
import {SINGERLIST} from "@/http/constant";

export default {
    name: "ImageSwiper",
    components: {
        listItem,
        PartTitle
    },
    props: ['musicList'],
    data() {
        return {
            playList: []
        }
    },
    computed: {
        // 每一部分的头部信息
        titleInfo() {
            return {
                type: this.musicList.type,
                title: this.musicList.title,
                specialRoutes: this.musicList.specialRoutes,
                isShowAll: this.musicList.isShowAll,
                isChange: true
            }
        }
    },
    watch: {
        musicList: {
            deep: true,
            handler(newVal, oldVal) {
                if (newVal.type === SINGERLIST) {
                    this.playList = newVal.musicList[0].data.map(columnItem => {
                        return {
                            id: columnItem.id,
                            title: columnItem.name,
                            picUrl: columnItem.img1v1Url,
                            hasPlayCount: false,
                            isCircle: true,
                            hasAuthor: false,
                            titleIsLeft: false,
                            alias: JSON.parse(JSON.stringify(columnItem.alias)),
                            accountId: columnItem.accountId,
                            fansCount: columnItem.fansCount,
                            musicSize: columnItem.musicSize,
                            itemType: newVal.type,
                            hasPlayIcon: true,

                        }
                    })
                    // console.log(newVal.musicList)
                }
            }
        }
    }
}
</script>

<style scoped lang="less">
@keyframes scrollInfinite {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.singer-show {
  width: 100%;
  overflow: hidden;

  .singer-item {
    width: 420%;
    display: flex;

    .singer-content {
      width: 50%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      animation: scrollInfinite 20s linear infinite;

      .singer-items {
        width: 13%;
        padding: .5%;
      }
    }

    &:hover {
      .singer-content {
        animation-play-state: paused;
      }
    }
  }


}
</style>